<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('业务流程工作区')"/>
    <style>
        .mask {
            position: absolute;
            width: 100%;
            height: 300%;
            z-index: 1;
            filter: alpha(opacity=0);
            opacity: 0.2;
            background: #fbf6ff;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn" style="height: 100%">
    <div class="col-sm-12" style="height: 100%">
        <input name="applyId" id="applyId" th:value="${instanceId}" type="hidden">
        <input name="versionId" id="versionId" th:value="${versionId}" type="hidden">
        <input name="instanceId" id="instanceId" th:value="${instanceId}" type="hidden">
        <input name="stepId" id="stepId" th:value="${stepId}" type="hidden">
        <input name="taskId" id="taskId" th:value="${taskId}" type="hidden">
        <input name="keyInfo" id="keyInfo" th:value="${keyInfo}" type="hidden">
        <input name="approveTypes" id="approveTypes" type="hidden">
        <input name="approveMemos" id="approveMemos" type="hidden">
        <div class="tabs-container" id="pageTab" style="height: 100%">
            <ul class="nav nav-tabs" id="pageTabList" th:with="type=${pageList}">
                <li th:each="page : ${type}" th:if="${page.orderNum} == 1"  th:title="${page.pageName}"
                    th:validate="${page.isCheck}">
                    <a data-toggle="tab" th:href="${page.tabHref}" aria-expanded="true">[[${page.pageName}]]</a>
                </li>
                <li th:each="page : ${type}" th:title="${page.pageName}" th:validate="${page.isCheck}"
                    th:if="${page.orderNum} > 1">
                    <a data-toggle="tab" th:id="${page.pageId}" th:href="${page.tabHref}" aria-expanded="true">[[${page.pageName}]]</a>
                </li>
                <li title="影像资料" validate="1" class="active">
                    <a data-toggle="tab" th:id="doc" href="#doc_upload" aria-expanded="true">影像资料</a>
                </li>
            </ul>
            <p style="text-align: right">
                <button class="btn btn-primary " type="button">
                    <i class="fa fa-check" onclick="submitTask()">&nbsp;提交</i>
                </button>
                <button class="btn btn-info " type="button">
                    <i class="fa fa-list-ul" onclick="approveList()">&nbsp;审批记录</i>
                </button>
            </p>
            <div class="tab-content" id="tab-content-list" style="height: 300%" th:with="pageList=${pageList}">
                <div th:each="page : ${pageList}" th:id="${page.tabId}" th:if="${page.orderNum} == 1"
                     class="tab-pane " style="height: 100%">
                    <div th:if="${page.isOnlyRead} == 1" class="mask">
                    </div>
                    <iframe align="center" width="100%" th:id="${page.tabId}+iframe" height="100%"
                            th:src="@{${page.pcPageUrl}+${instanceId}}"
                            frameborder="no"
                            border="0" marginwidth="0" marginheight="0" scrolling="yes">
                    </iframe>
                </div>
                <div th:each="page : ${pageList}" th:id="${page.tabId}" th:if="${page.orderNum} > 1"
                     class="tab-pane"
                     style="height: 100%">
                    <div th:if="${page.isOnlyRead} == 1" class="mask">
                    </div>
                    <iframe align="center" width="100%" th:id="${page.tabId}+iframe" height="900%"
                            th:src="@{${page.pcPageUrl}+${instanceId}}"
                            frameborder="no"
                            border="0" marginwidth="0" marginheight="0" scrolling="no">
                    </iframe>
                </div>
                <div  class="tab-pane active" id="doc_upload" style="height: 100%">
                    <iframe id="doc_upload_iframe" width="100%" height="100%"
                            th:src="@{'/busiflw/docReg/'+${versionId}+'/'+${instanceId}+'/'+${stepId}}"
                            frameborder="0" border="0" marginwidth="0" marginheight="0">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">

    /*任务提交*/
    function submitTask() {
        //提交时调用各个页签保存方法
        doSaveTab();
        if (!validateTabs()) {
            return;
        }
        top.layer.open({
            type: 1,
            area: ['600px', '300px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: '审批意见',
            content: $('#approve').html(),
            btn: ['<i class="fa fa-check"></i> 确定', '<i class="fa fa-remove"></i> 取消'],
            // 弹层外区域关闭
            shadeClose: false,
            btn1: function (index, layero) {
                var approveType = layero.find('#approveType').val();
                var approveMemo = layero.find('#approveMemo').val();
                $("#approveTypes").val(approveType);
                $("#approveMemos").val(approveMemo);
                if (approveType == "") {
                    $.modal.msgWarning("请选择审批意见！");
                    return false;
                } else if (approveType == "T") {
                    var nextStep = getNextStep();
                    if (nextStep.taskPolicy == 2 || nextStep.taskPolicy == 4) {
                        selectApproveUserTree();
                        return;
                    }
                } else {
                    if (approveMemo == "") {
                        $.modal.msgWarning("请填写意见备注！");
                        return false;
                    }
                }
                var index = top.layer.load(2, {shade: false});
                $.modal.disable();
                $.ajax({
                    type: 'POST',
                    url: ctx + "businessFlow/submitTask",
                    async: false,
                    data: {
                        "versionId": $("#versionId").val(),
                        "instanceId": $("#instanceId").val(),
                        "stepId": $("#stepId").val(),
                        "taskId": $("#taskId").val(),
                        "keyInfo": $("#keyInfo").val(),
                        "approveType": approveType,
                        "approveMemo": approveMemo,
                    },
                    success: function (result) {
                        if (result.code == web_status.SUCCESS) {
                            $.modal.alertConfirm(result.msg, function () {
                                $.modal.close(index);
                                $.modal.closeAll();
                                $.modal.closeTab();
                            });

                        } else {
                            $.modal.alertWarning(result.msg);
                            $.modal.close(index);
                            $.modal.enable();
                        }
                    }
                });
            }
        });
    }

    //获取下一节点信息
    function getNextStep() {
        var nextStep;
        $.ajax({
            type: 'POST',
            traditional: true,
            url: ctx + "businessFlow/getNextStep",
            async: false,
            data: {
                "versionId": $("#versionId").val(),
                "stepId": $("#stepId").val(),
                "instanceId": $("#instanceId").val(),
                "keyInfo": $("#keyInfo").val()
            },
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    nextStep = result.data;
                } else {
                    $.modal.close(index);
                    $.modal.enable();
                    $.modal.alertWarning(result.msg);
                }
            }
        });
        return nextStep;
    }

    /*选择审批人*/
    function selectApproveUserTree() {
        var options = {
            title: '选择审批人',
            width: "400",
            height: "300",
            url: ctx + "businessFlow/selectApproveUserList/" + $("#versionId").val() + "/" + $("#instanceId").val() + "/" + $("#stepId").val() + '?keyInfo=' + encodeURI($("#keyInfo").val()),
            callBack: doSubmitApproveUser
        };
        $.modal.openOptions(options);
    }

    //带审批人提交流程
    function doSubmitApproveUser(index, layero) {
        //提交时调用各个页签保存方法
        doSaveTab();
        var body = $.modal.getChildFrame(index);
        var choiceApproveUserList = $.map(body.find('input[name=user]:checked').get(), function (item) {
            return item.value
        });
        var approvePop = body.find('#approvePop').val();
        if (choiceApproveUserList.length == 0) {
            $.modal.alertWarning("请选择下一节点审批人！");
        } else if (choiceApproveUserList.length < approvePop) {
            $.modal.alertWarning("下一节点需要" + approvePop + "人审批！");
        } else {
            var approveType = $('#approveTypes').val();
            var approveMemo = $('#approveMemos').val();
            $.modal.close(index);
            var data = {
                "versionId": $("#versionId").val(),
                "instanceId": $("#instanceId").val(),
                "stepId": $("#stepId").val(),
                "taskId": $("#taskId").val(),
                "keyInfo": $("#keyInfo").val(),
                "approveType": approveType,
                "approveMemo": approveMemo,
                "choiceApproveUserList": choiceApproveUserList
            };
            $.ajax({
                type: 'POST',
                traditional: true,
                async: false,
                url: ctx + "businessFlow/submitTaskIncludeApproveUserList",
                data: data,
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        $.modal.alertConfirm(result.msg, function () {
                            $.modal.close(index);
                            $.modal.closeAll();
                            $.modal.closeTab();
                        });
                    } else {
                        $.modal.close(index);
                        $.modal.enable();
                        $.modal.alertWarning(result.msg);
                    }
                }
            });
        }
    }

    //验证需要校验的页签是否已经查看
    function validateTabs() {
        var flag = true;//是否能提交的标志
        var tabs = $('#pageTab').children('ul').html();
        var tab = tabs.split("</li>");
        for (var i = 0; i < tab.length; i++) {
            if ($("ul li:eq(" + i + ")").attr("validate") == 1 && i > 0) {
                $.modal.alertWarning($("ul li:eq(" + i + ")").attr("title") + "页签需要审阅！");
                flag = false;
                break;
            }
        }
        return flag;
    }

    //点击页签时，修改页签的校验值为0
    $('.nav-tabs li').click(function () {
        $(this).attr("validate", "0");
    });

    function approveList() {
        $.modal.open("审批记录", ctx + "businessFlow/approveList/" + $("#instanceId").val());
    }

    //提交流程时对非只读页面调用保存方法
    function doSaveTab() {
        var versionId = $("#versionId").val();
        var stepId = $("#stepId").val();
        $.ajax({
            type: 'POST',
            traditional: true,
            url: ctx + "businessFlow/getPageList",
            async: false,
            data: {
                "versionId": $("#versionId").val(),
                "stepId": $("#stepId").val()
            },
            success: function (result) {
                if (result.code == web_status.SUCCESS) {

                    // var uploadIframe = document.getElementById("doc_upload_iframe");
                    // var uploadIwindow = uploadIframe.contentWindow;
                    // uploadIwindow.submitHandler();
                    var pageList = result.data;
                    for (var i in pageList) {
                        if (pageList[i].isOnlyRead == 0) {
                            var iframeId = pageList[i].tabId + "iframe";
                            var iframe = document.getElementById(iframeId);
                            var iwindow = iframe.contentWindow;
                            iwindow.submitHandler && iwindow.submitHandler();
                        }
                    }
                    ;
                }
            }
        });
    }
</script>
</body>
<!-- 审批意见 -->
<script id="approve" type="text/template">
    <form class="form-horizontal" id="approveForm">
        <br>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">审批意见：</label>
            <div class="col-sm-8">
                <select name="approveType" id="approveType" class="form-control m-b" th:with="type=${appAuthorList}"
                        required>
                    <option value="">--请选择--</option>
                    <option th:each="author : ${type}" th:text="${author.approvDesc}"
                            th:value="${author.approvCode+#strings.defaultString(author.returnStepId, '')}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <textarea name="approveMemo" id="approveMemo" maxlength="500" class="form-control" rows="3"></textarea>
            </div>
        </div>
    </form>
</script>
</html>
